<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>json </title>

    <link rel="stylesheet" th:href="@{/static/iview/iview.css}">
    <script th:src="@{/static/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/libs/vue.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/layer/layer.js}" type="text/javascript"></script>
   <script th:src="@{/static/iview/iview.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/common.js}" type="text/javascript"></script>
	<script th:src="@{/static/json/jquery.json-viewer.js}" type="text/javascript"></script>
	<link th:href="@{/static/json/jquery.json-viewer.css}" rel="stylesheet"/>
	
    <style type="text/css">
body {
  margin: 0 100px;
  font-family: sans-serif;
}
p.options label {
  margin-right: 10px;
}
p.options input[type=checkbox] {
  vertical-align: middle;
}
textarea#json-input {
  width: 100%;
  height: 200px;
}
pre#json-renderer {
  border: 1px solid #aaa;
}
    </style>

    <script>
$(function() {
  function renderJson() {
	  try {
	      var input = eval('(' + $('#json-input').val() + ')');
	    }catch (error) {
	      return alert("转换失败: " + error);
	    }
	  
    var options = {
      collapsed: $('#collapsed').is(':checked'),
      rootCollapsable: $('#root-collapsable').is(':checked'),
      withQuotes: $('#with-quotes').is(':checked'),
      withLinks: $('#with-links').is(':checked')
    };
    $('#json-renderer').jsonViewer(input, options);
  }

  //点击事件
  $('#btn-json-viewer').click(renderJson);

  //点击事件
  $('p.options input[type=checkbox]').click(renderJson);

});
    </script>
  </head>
  <body>
    <h1><a href="https://github.com/abodelot/jquery.json-viewer">JSON格式化</a></h1>
    <textarea id="json-input" autocomplete="off"></textarea>
    <p class="options">
      设置:
      <label title="Allow root element to be collasped">
        <input type="checkbox" id="root-collapsable" checked>根节点折叠
      </label>
        <label title="Generate node as collapsed">
        <input type="checkbox" id="collapsed">展开所有节点
      </label>
      <label title="Surround keys with quotes">
        <input type="checkbox" id="with-quotes">键值加括号
      </label>
      <!--   
    <label title="Generate anchor tags for URL values">
        <input type="checkbox" id="with-links" checked>
        With Links
      </label> -->
    </p>
    <button id="btn-json-viewer" title="run jsonViewer()">转换</button>
    <pre id="json-renderer" style="width:100%;height:400px;"></pre>
  </body>
</html>
